<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="rules" :model="addData" label-position="left" label-width="90px" style=" margin: 10px 50px; height: 600px;">
      <el-tabs type="card">
        <el-tab-pane label="基本数据">
          <el-form-item label="中文名称" prop="cn_name">
            <el-input v-model="addData.cn_name" style="width: 380px;" />
          </el-form-item>
          <el-form-item label="英文名称" prop="en_name">
            <el-input v-model="addData.en_name" style="width: 380px;" />
          </el-form-item>
          <el-form-item label="景点类型" prop=".type_sub_id">
            <el-select v-model="addData.type_sub_id" class="filter-item" placeholder="请选择类型">
              <el-option
                v-for="item in typeTree"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="开放时间" prop="open Time">
            <el-time-picker
              v-model="defaultTimeOption"
              is-range
              format="HH:mm"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              @change="handleTimeChange()"
            />
          </el-form-item>
          <el-form-item label="是否收费" prop="fee_ticket_has">
            <el-radio v-model="addData.fee_ticket_has" label="0" border>是</el-radio>
            <el-radio v-model="addData.fee_ticket_has" label="1" border>否</el-radio>
          </el-form-item>

          <el-form-item label="内置收费" prop="fee_inner_project_has">
            <el-radio v-model="addData.fee_inner_project_has" label="0" border>无</el-radio>
            <el-radio v-model="addData.fee_inner_project_has" label="1" border>有</el-radio>
          </el-form-item>
          <el-form-item label="费用说明" prop="fee_ticket_amount">
            <el-input v-model="addData.fee_ticket_amount" size="2" placeholder="费用说明" style="width: 380px;" />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="空间数据">
          <el-form-item label="省/市" prop="province">
            <el-cascader
              v-model="tmpCityChoose"
              style="width: 380px;"
              :options="cityTree"
              @change="handleCityChange"
            />
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="addData.address" style="width: 520px;" />
          </el-form-item>

          <el-form-item label="经度" prop="x">
            <el-input v-model="addData.x" maxlength="20" placeholder="经度" style="width: 180px;" />
          </el-form-item>
          <el-form-item label="维度" prop="y">
            <el-input v-model="addData.y" maxlength="20" placeholder="维度" style="width: 180px;" />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="内容">
          <vue-tinymce :content.sync="addData.content_cn" :config="customConfig" />
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div slot="footer" class="dialog-footer" style="padding-left: 200px;">
      <el-button @click="dialogFormVisible = false">
        取消
      </el-button>
      <el-button type="primary" @click="handleSubmit()">
        提交
      </el-button>
    </div>
  </div>
</template>

<script>
import { elementAdd, elementItem } from '@/api/element'
const VueTinymce = () => import('@panhezeng/vue-tinymce')

import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'

export default {
  name: 'FoodList',
  components: { VueTinymce },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        '0': '待审核',
        '1': '已审核',
        '2': '已上架',
        '99': '已删除'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      // 副文本配置
      customConfig: {
        body_class: 'my_id',
        height: 500,
        plugins: 'image',
        toolbar: 'image',
        images_upload_url: process.env.VUE_APP_BASE_API + 'element/content/image'
      },
      // 当前编辑ID
      currentItemId: 0,
      // 城市
      tmpCityChoose: [],
      cityTree: [],
      // 类型
      typeTree: [],

      listLoading: true,

      defaultTimeOption: [new Date(2020, 5, 24, 11, 0), new Date(2020, 5, 24, 17, 0)],
      addData: {
        id: 0,
        cn_name: '',
        en_name: '',
        province_id: 'all',
        city_id: 'all',
        address: '',
        type_id: 1,
        type_sub_id: 'all',
        open_time: [],
        close_time: '22:00',
        open_week_day: [1, 2, 3, 4, 5, 6, 7],
        x: '',
        y: '',

        fee_ticket_has: 0,
        fee_inner_project_has: 0,
        fee_ticket_amount: '',

        phone: '',
        website: '',

        summer_cn: '',
        summer_en: '',

        content_cn: '',
        content_en: ''
      },

      rules: {
        type: [{ required: true, message: '需要选择类型', trigger: 'change' }],
        cn_name: [{ required: true, message: '需要填写中文名称', trigger: 'blur' }],
        en_name: [{ required: true, message: '需要填写英文名称', trigger: 'blur' }]
      }
    }
  },
  computed: {
  },
  created() {
    this.currentItemId = this.$route.params.id
    this.resetAddData()
    // 有Id 为编辑
    if (this.currentItemId > 0) {
      elementItem({ id: this.currentItemId }).then((response) => {
        if (response.success) {
          this.addData = response.data.data
          // 省市选择
          this.cityTree = response.data.cityOptions
          this.tmpCityChoose = [this.addData.province_id, this.addData.city_id]
          this.defaultTimeOption = this.formatTimeFromServe(this.addData.open_time, this.addData.close_time)
        }
      })
    }
  },
  methods: {
    resetAddData() {
      this.addData = {
        id: 0,
        cn_name: '',
        en_name: '',
        province_id: 'all',
        city_id: 'all',
        address: '',
        type_id: 1,
        type_sub_id: 'all',
        open_time: '08:00',
        close_time: '22:00',
        open_week_day: [1, 2, 3, 4, 5, 6, 7],
        x: '',
        y: '',

        fee_ticket_has: '0',
        fee_inner_project_has: '0',
        fee_ticket_amount: '',

        phone: '',
        website: '',

        summer_cn: '',
        summer_en: '',

        content_cn: '',
        content_en: ''
      }

      this.tmpCityChoose = []
    },
    handleCreate() {
      this.resetAddData()
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          elementAdd(this.addData).then((response) => {
            console.log(response)
            if (response.success) {
              this.$notify({
                title: 'Success',
                message: '提交成功',
                type: 'success',
                duration: 2000
              })
            }
          })
        }
      })
    },
    formatJson(filterVal) {
      return this.list.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    // 选择省份和城市触发 - 编辑和添加
    handleCityChange(value) {
      const provinceId = value[0]
      const cityId = value[1]
      this.addData.province_id = provinceId
      this.addData.city_id = cityId
    },
    // 时间选择
    handleTimeChange() {
      const startDate = this.defaultTimeOption[0]
      const endDate = this.defaultTimeOption[1]
      this.addData.open_time = startDate.getHours() + ':' + startDate.getMinutes()
      this.addData.close_time = endDate.getHours() + ':' + endDate.getMinutes()
    },
    formatTimeFromServe(openTime, closeTime) {
      const openTimeArr = openTime.split(':')
      const openTimeStrArr = []
      openTimeStrArr[0] = openTimeArr[0][0] === '0' ? openTimeArr[0][1] : openTimeArr[0]
      openTimeStrArr[1] = openTimeArr[1][0] === '0' ? openTimeArr[1][1] : openTimeArr[1]

      const closeTimeArr = closeTime.split(':')
      const closeTimeStrArr = []
      closeTimeStrArr[0] = closeTimeArr[0][0] === '0' ? closeTimeArr[0][1] : closeTimeArr[0]
      closeTimeStrArr[1] = closeTimeArr[1][0] === '0' ? closeTimeArr[1][1] : closeTimeArr[1]

      openTime = new Date(2020, 5, 21, +openTimeStrArr[0], +openTimeStrArr[1], 0)
      closeTime = new Date(2020, 5, 21, +closeTimeStrArr[0], +closeTimeStrArr[1], 0)
      return [openTime, closeTime]
    }
  }
}
</script>
